<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无人超市支付</title>
    <link rel="icon" th:href="@{/favicon.ico}" type="/favicon.ico"/>
    <link rel="bookmark" th:href="@{/favicon.ico}" type="/favicon.ico"/>
    <!--引入axios-->
    <script src="js/axios.min.js"></script>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="element_ui/index.js"></script>
    <script src="js/quagga/quagga.min.js"></script>
    <script src="js/qrious/qriout.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="element_ui/index.css">
    <script src="js/@zxing/index.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url('/apm/img/indexBG.jpg');
            background-size: cover;
        }

        .el-row {
            margin-bottom: 20px;
        }

        .el-col {
            border-radius: 4px;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        #canvanCode canvas {
            display: none;
        }

        .myButton {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .myButton button {
            margin: 50px 0;
        }

        .row-show {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .box {
            padding: 20px;
        }

        .box1,
        .box2,
        .box3 {
            width: 33%;
            height: 100%;
        }

        .box4,
        .box5 {
            width: 45%;
            height: 85%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .container {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .content h2 {
            font-size: 19px;
        }

        .box-css {
            position: absolute;
            top: 22%;
            left: 11%;
            transform: translate(-50%, -50%);
            width: 330px;
            height: 330px;
            background: #222d74a6;
            box-sizing: border-box;
            overflow: hidden;
            box-shadow: 0 20px 50px rgb(23, 32, 90);
            border: 2px solid #2a3cad;
            color: white;
            padding: 20px;
        }

        .box-css:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            transition: 0.5s;
            pointer-events: none;
        }

        .box-css:hover:before {
            left: -50%;
            transform: skewX(-5deg);
        }


        .box-css .content {
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border: 1px solid #f0a591;
            padding: 17px;
            /*text-align: center;*/
            box-shadow: 0 5px 10px rgba(9, 0, 0, 0.5);

        }

        .box-css span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            box-sizing: border-box;

        }

        .box-css span:nth-child(1) {
            transform: rotate(0deg);
        }

        .box-css span:nth-child(2) {
            transform: rotate(90deg);
        }

        .box-css span:nth-child(3) {
            transform: rotate(180deg);
        }

        .box-css span:nth-child(4) {
            transform: rotate(270deg);
        }

        .box-css span:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: #50dfdb;
            animation: animate 4s linear infinite;
        }

        @keyframes animate {
            0% {
                transform: scaleX(0);
                transform-origin: left;
            }
            50% {
                transform: scaleX(1);
                transform-origin: left;
            }
            50.1% {
                transform: scaleX(1);
                transform-origin: right;

            }

            100% {
                transform: scaleX(0);
                transform-origin: right;

            }
        }
        #box-charts-1 {
            margin-left: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: 'Raleway';
            font-size: 2.5rem;
        }
        #box-charts-2 {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: 'Raleway';
            font-size: 2.5rem;
        }
        .gradient-border-charts {
            --borderWidth: 3px;
            background: #4b48a0;
            position: relative;
            border-radius: var(--borderWidth);
        }
        .gradient-border-charts:after {
            content: '';
            position: absolute;
            top: calc(-1 * var(--borderWidth));
            left: calc(-1 * var(--borderWidth));
            height: calc(100% + var(--borderWidth) * 2);
            width: calc(100% + var(--borderWidth) * 2);
            background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
            border-radius: calc(2 * var(--borderWidth));
            z-index: -1;
            animation: animatedgradient 3s ease alternate infinite;
            background-size: 300% 300%;
        }


        @keyframes animatedgradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        h1 {
            /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
            /*width: 12em;*/
            /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
             注意step和字数保持一致，光标动画也是同理，*/
            /*animation: typingWords 5s steps(12) infinite, cursor 0.5s steps(1) infinite;*/
            /* 要设置不允许换行，且溢出隐藏 */
            white-space: nowrap;
            overflow: hidden;
            /* 使用右边框作为打印的指针光标 */
            /*border-right: 1px solid #000;*/
        }

        @keyframes typingWords {
            0% {
                width: 0;
            }
        }

        @keyframes cursor {
            50% {
                border-color: transparent;
            }
        }

        .infinite-list-item {
            margin-top: 10px;
        }
        /*隐藏滚动条*/
        /*.page-scroll {*/
        /*    height: 100%;*/
        /*}*/

        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row :gutter="10">
        <el-col :span="16">
            <div class="grid-content" style="height: 100vh">
                <div class="row-show" style="height: 45%;">
                    <div class="box box1">
                        <template>
                            <div class="container">
                                <div class="box-css">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <div class="content">
                                        <h4 style="text-align: center; margin-bottom: 11px">今日优惠(会员价)</h4>
                                        <ul class="infinite-list"
                                            v-infinite-scroll="showCharts"
                                            :infinite-scroll-disabled="true"
                                            style="overflow:auto; list-style-type: none; padding-left: 0;">
                                            <li v-for="i in preferentialList">
                                                <div class="infinite-list-item" style="font-size: 13px;width: 79%;float: left;">{{ i.productName }}</div>
                                                <div class="infinite-list-item" style="font-size: 13px;width: 20%;float: right;">
                                                    {{ (i.productPrice / 100.0).toFixed(2) }}￥
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="box box2">
                        <template>
                            <div class="container">
                                <div class="box-css" style="left: 34%">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <div class="content">
                                        <h4 style="text-align: center; margin-bottom: 11px">今日热销</h4>
                            <ul class="infinite-list"
                                v-infinite-scroll="showCharts"
                                :infinite-scroll-disabled="true"
                                style="overflow:auto; list-style-type: none; padding-left: 0;">
                                <li v-for="i in hotSellingList">
                                    <div class="infinite-list-item" style="font-size: 13px;width: 90%;float: left;">{{ i.product_name }}</div>
                                    <div class="infinite-list-item" style="font-size: 13px;width: 10%;float: right;">{{ i.total_number }}</div>
                                </li>
                            </ul>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="box box3">

                        <template>
                            <div class="container">
                                <div class="box-css" style="left:57%">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <div class="content">
                                        <h4 style="text-align: center; margin-bottom: 11px">今日新品</h4>
                            <ul class="infinite-list"
                                v-infinite-scroll="showCharts"
                                :infinite-scroll-disabled="true"
                                style="list-style-type: none; padding-left: 0;">
                                <li v-for="i in newProductList">
                                    <div class="infinite-list-item" style="font-size: 13px;width: 79%;float: left;">{{ i.product_name }}</div>
                                    <div class="infinite-list-item" style="font-size: 13px;width: 20%;float: right;">
                                        {{ (i.price_d / 100.0).toFixed(2) }}￥
                                    </div>
                                </li>
                            </ul>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="row-show" style="height: 50%;margin: 20px auto 0;">
                    <!-- 客流量折线图-->
                    <div class="box box4 gradient-border-charts" id="box-charts-1">
                        <div ref="ChartOfPassengerFlow" style="width: 98%;height: 100%;"></div>
                    </div>
                    <div class="box box5 gradient-border-charts" id="box-charts-2">
                        <!-- 类别销量统计-->
                        <div ref="SalesStatistics" style="width: 98%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content" style="height: 100%;">
                <div class="myButton">
                    <h1 style="font-size: 47px;color: #625757;">无人超市支付系统</h1>
                    <el-button type="success" @click="settlement" style="margin-top: 100px;">扫 码 结 算</el-button>
                    <el-button type="warning" style="margin-left: 0;" @click="MemberRegistration = true">会 员 登 录
                    </el-button>
                    <div style="margin-top: 50px;">
                        <canvas ref="generateUserShow"></canvas>
                        <p style="text-align: center; margin-top: 10px; color: #faf9f8; font-size: 18px;">手机扫码查看订单与积分</p>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-dialog title="无人超市-结算单"
               :visible.sync="dialogFormVisible"
               width="90%"
               top="10px"
               :destroy-on-close="true">
        <div style="height: 450px">
            <div style="float: left;">
                <el-table
                        :data="showInfo"
                        style="width: 100%"
                        height="480">
                    <el-table-column
                            fixed
                            prop="name"
                            label="商品名"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="单价(/元)"
                            width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.price.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="discountPrice"
                            label="优惠(/元)"
                            width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.discountPrice.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="数量"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button type="success" icon="el-icon-plus" size="mini"
                                       @click.native.prevent="addCountInfo(scope.$index, showInfo)" circle></el-button>
                            <el-button type="danger" icon="el-icon-minus" size="mini"
                                       @click.native.prevent="removeCountInfo(scope.$index, showInfo)"
                                       circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div id="canvanCode" style="float: right;"></div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-descriptions class="margin-top" title="账单汇总" :column="4" size="medium" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        会员手机号
                    </template>
                    {{ phoneNumber.toString().substr(0, 3) + '****' + phoneNumber.toString().substr(7) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        订单金额
                    </template>
                    {{ orderAmount.toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        优惠金额
                    </template>
                    {{ discountAmount.toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        待付金额
                    </template>
                    {{ amountToBePaid.toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        用户积分
                    </template>
                    {{ (integral / 100.0).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        备注
                    </template>
                    <el-tag size="medium">无人支付超市</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <el-button type="warning" @click="qinit()">开始扫描</el-button>
            <el-button type="warning" @click="qstop()">停止扫描</el-button>
            <el-button @click="qstop">取 消</el-button>
            <el-button type="primary" @click="balancePay">结算</el-button>
        </div>
    </el-dialog>
    <el-dialog title="无人超市-付款"
               :visible.sync="dialogFormPay"
               width="70%"
               top="10px"
               :destroy-on-close="true">
        <div style="height: 500px;">
            <div style="float: left;">
                <video ref="video" id="video" autoplay></video>
                <canvas ref="qrcodeCanvas"></canvas>
            </div>
            <div style="float: right;padding-right: 7%; width: 100px;">
                <el-descriptions class="margin-top" title="账单汇总" :column="1" size="medium" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            会员手机号
                        </template>
                        {{ phoneNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            订单金额
                        </template>
                        {{ orderAmount.toFixed(2) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            优惠金额
                        </template>
                        {{ discountAmount.toFixed(2) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            待付金额
                        </template>
                        {{ amountToBePaid.toFixed(2) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            备注
                        </template>
                        <el-tag size="medium">无人支付超市</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="onPayment">扫码支付</el-button>
            <el-button type="success" @click="onReceiptPayment">收付款支付</el-button>
            <el-button @click="paymentCancellation">取消支付</el-button>
        </div>
    </el-dialog>
    <el-dialog title="无人超市-会员登录(未注册用户自动注册)"
               :visible.sync="MemberRegistration"
               width="30%"
               @close="cancelMember"
               :destroy-on-close="true">
        <el-form :model="vip" ref="vipForm" label-width="100px" class="demo-ruleForm">
            <el-form-item
                    label="电话号码"
                    prop="phoneNumber">
                <el-input v-model.number="vip.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item
                    label="验证码"
                    prop="code"
                    :rules="[
                          { required: true, message: '验证码不能为空'},
                          { type: 'number', message: '验证码必须为数字值'}
                        ]">
                <el-input v-model.number="vip.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="sendCode" :disabled="isSending || countdown > 0">
                    {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
                </el-button>
                <el-button type="primary" @click="vipForm" :disabled="sendSubDisabled">提交</el-button>
                <el-button @click="cancelMember">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <audio ref="audio" src="mp3/扫描成功.mp3" autoplay></audio>
</div>
</body>
<script src="js/productPayment.js"></script>
</html>